<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="课程详情"></sc-title>
                    <div>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form ref="form" label-width="120px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="课程名称:">{{course.name}}</el-form-item>
                                                        <el-form-item label="课程学段:">{{course.level && course.level.name || ''}}</el-form-item>
                                                        <el-form-item label="课程教材:">{{course.book && course.book.name || ''}}</el-form-item>
                                                        <el-form-item label="课程状态:">
															<el-tag size="mini" v-if="course.status && course.status.value == 0" type="danger">禁用</el-tag>
                                                            <el-tag size="mini" v-if="course.status && course.status.value == 1" type="success">启用</el-tag>
														</el-form-item>
                                                        <el-form-item label="体验课:">{{course.isTrial && course.isTrial.name || ''}}</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="课程类型:">{{course.category && course.category.name || ''}}</el-form-item>
                                                        <el-form-item label="课程难度:">{{course.difficulty && course.difficulty.name || ''}}</el-form-item>
                                                        <el-form-item label="词汇数量:">{{course.words}}</el-form-item>
                                                        <el-form-item label="创建时间:">{{course.createdAt}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                
                                            </el-col>
                                        </el-row>
                                    </div>
									
                                </el-form>
                            </el-tab-pane>
                           
                            
                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    components: {
        
    },
    data() {
        return {
            visible: false,
            loading: false,
            course: {},
            courseId: null,
            activeName: 'first',
        }
    },
    methods: {
        open(id) {
            this.visible = true
            this.courseId = id
            this.getData(id)
        },
        async getData(id) {
            this.loading = true
            await this.$API.course.action.get({id: id}).then((res) => {
                this.course = res.data
                this.loading = false
            }, () => {
                this.loading = false
            })
        },
        handleSuccess() {
            this.getData(this.courseId)
        }
    }
}
</script>

<style scoped>
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}
</style>
